<template>
  <div>
    <div style="text-align: right; margin-right: 30px; margin-top: 10px">
      <el-button type="danger" size="small" @click="handleBatchDel" plain
        >批量删除</el-button
      >
    </div>
    <!-- 遍历展示list集合 -->
    <el-table
      :data="list"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column prop="integralStart" label="开始积分"> </el-table-column>
      <el-table-column prop="integralEnd" label="截止积分"> </el-table-column>
      <el-table-column prop="borrowAmount" label="借款额度"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
//引入api:integralGradeApi代表引入的文件中导出的json对象
import integralGradeApi from "@/api/integral-grade";
export default {
  data() {
    return {
      //接收查询到的积分等级列表
      list: [],
      ids: [],
    };
  },
  //生命周期方法：会自动执行
  created() {
    //页面渲染前调用
    this.initData();
  },
  methods: {
    //批量删除按钮单击事件函数
    handleBatchDel() {
      if (!this.ids || this.ids.length === 0) {
        //如果ids集合未定义 或者 长度为0 不发起请求
        this.$message.warning("请选择要删除的行数据");
        return;
      }
      //TODO：弹出确认框
      integralGradeApi.deleteByIds(this.ids).then((r) => {
        this.$message.success("批量删除成功");
        this.initData();
      });
    },
    //表格复选框选中状态改变时的事件函数
    handleSelectionChange(checkedRows) {
      //checkedRows代表选中行的 json对象的json数组
      let ids = [];
      //遍历获取选中的行的数据id
      checkedRows.forEach((row) => {
        ids.push(row.id);
      });
      this.ids = ids;
      console.log(this.ids);
    },
    //按钮组事件函数
    handleEdit(idx, row) {
      //console.log(idx, row);
      //跳转到 编辑页面
      // this.$router 代表绑定到vue中的vue-router组件对象
      // this.$route 代表访问当前页面的那个路由
      this.$router.push(`/integral-grade/edit/${row.id}`);
    },
    //删除按钮单击事件函数
    handleDelete(idx, row) {
      //弹出确认框
      this.$confirm("此操作将删除该积分等级, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          integralGradeApi.deleteById(row.id).then((r) => {
            this.$message.success("删除成功");
            //查询数据列表重新展示
            this.initData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查询积分等级列表
    initData() {
      integralGradeApi
        .list() //调用api的list函数
        .then((r) => {
          //返回成功的回调
          //默认axios异步请求得到的是响应报文对象，但是当前项目中配置了axios的响应拦截器处理了返回结果

          //r代表后端响应的R对象的json:  响应体中的数据
          // console.log("success:", r);
          // console.log(r.data.items);
          this.list = r.data.items;
        })
        .catch((e) => {
          //返回失败的回调
          console.log("fail:", e);
        });
    },
  },
};
</script>
